<div class="tlp-form-element tlp-form-element-prepend">
    <span class="tlp-prepend"><i class="fa fa-tags"></i></span>
    <input type="text" class="tlp-input" id="tags-prepend-icon" name="tags" placeholder="fbi, saucer, pop corn…">
</div>

<div class="tlp-form-element tlp-form-element-prepend">
    <span class="tlp-prepend"><i class="fa fa-globe"></i></span>
    <span class="tlp-prepend">https://</span>
    <input type="url" class="tlp-input" id="website-prepend-text" name="website" placeholder="www.foxmulder.com">
</div>

<div class="tlp-form-element">
    <label class="tlp-label" for="spaceship-prepend">Spaceship name prepend</label>
    <div class="tlp-form-element tlp-form-element-prepend">
        <span class="tlp-prepend"><i class="fa fa-rocket"></i></span>
        <input type="text" class="tlp-input" id="spaceship-prepend" name="spaceship" placeholder="The big brown cigar">
    </div>
    <p class="tlp-text-info"><i class="fa fa-life-saver"></i> Hey bro', I'm a help text. I'm here to help you.</p>
</div>

<div class="tlp-form-element">
    <label class="tlp-label" for="select2-prepend">Choose an area</label>
    <div class="tlp-form-element tlp-form-element-prepend">
        <span class="tlp-prepend tlp-prepend"><i class="fa fa-map-marker"></i></span>
        <select class="tlp-select tlp-select" id="select2-prepend" name="area" style="width: 100%">
            <option value=""></option>
            <optgroup label="4x areas">
                <option value="area-46">Area p46</option>
                <option value="area-49">Area 49</option>
            </optgroup>
            <optgroup label="5x areas">
                <option value="area-51">Area 51</option>
                <option value="area-52">Area 52</option>
                <option value="area-53" disabled>Area 53</option>
                <option value="area-54">Area 54</option>
                <option value="area-55">Area 55</option>
                <option value="area-58">Area 59</option>
            </optgroup>
        </select>
    </div>
    <script type="text/javascript">
        tlp.select2(document.querySelector('#select2-prepend'), {
            placeholder: 'Choose an area',
            allowClear: true
        });
    </script>
</div>

<div class="tlp-form-element">
    <label class="tlp-label" for="spaceship-prepend-small">Spaceship name prepend small</label>
    <div class="tlp-form-element tlp-form-element-prepend">
        <span class="tlp-prepend tlp-prepend-small"><i class="fa fa-rocket"></i></span>
        <input type="text" class="tlp-input tlp-input-small" id="spaceship-prepend-small" name="spaceship" placeholder="The big brown cigar">
    </div>
</div>

<div class="tlp-form-element">
    <label class="tlp-label" for="select2-prepend-small">Choose an area</label>
    <div class="tlp-form-element tlp-form-element-prepend">
        <span class="tlp-prepend tlp-prepend-small"><i class="fa fa-map-marker"></i></span>
        <select class="tlp-select tlp-select-small" id="select2-prepend-small" name="area" style="width: 100%">
            <option value=""></option>
            <optgroup label="4x areas">
                <option value="area-46">Area p46</option>
                <option value="area-49">Area 49</option>
            </optgroup>
            <optgroup label="5x areas">
                <option value="area-51">Area 51</option>
                <option value="area-52">Area 52</option>
                <option value="area-53" disabled>Area 53</option>
                <option value="area-54">Area 54</option>
                <option value="area-55">Area 55</option>
                <option value="area-58">Area 59</option>
            </optgroup>
        </select>
    </div>
    <script type="text/javascript">
        tlp.select2(document.querySelector('#select2-prepend-small'), {
            placeholder: 'Choose an area',
            allowClear: true
        });
    </script>
</div>

<div class="tlp-form-element">
    <label class="tlp-label" for="spaceship-prepend-large">Spaceship name prepend large</label>
    <div class="tlp-form-element tlp-form-element-prepend">
        <span class="tlp-prepend tlp-prepend-large"><i class="fa fa-rocket"></i></span>
        <input type="text" class="tlp-input tlp-input-large" id="spaceship-prepend-large" name="spaceship" placeholder="The big brown cigar">
    </div>
</div>

<div class="tlp-form-element">
    <label class="tlp-label" for="select2-prepend-large">Choose an area</label>
    <div class="tlp-form-element tlp-form-element-prepend">
        <span class="tlp-prepend tlp-prepend-large"><i class="fa fa-map-marker"></i></span>
        <select class="tlp-select tlp-select-large" id="select2-prepend-large" name="area" style="width: 100%">
            <option value=""></option>
            <optgroup label="4x areas">
                <option value="area-46">Area p46</option>
                <option value="area-49">Area 49</option>
            </optgroup>
            <optgroup label="5x areas">
                <option value="area-51">Area 51</option>
                <option value="area-52">Area 52</option>
                <option value="area-53" disabled>Area 53</option>
                <option value="area-54">Area 54</option>
                <option value="area-55">Area 55</option>
                <option value="area-58">Area 59</option>
            </optgroup>
        </select>
    </div>
    <script type="text/javascript">
        tlp.select2(document.querySelector('#select2-prepend-large'), {
            placeholder: 'Choose an area',
            allowClear: true
        });
    </script>
</div>
